<template>
	<view class="content font_family">
		<view class="item f" v-for="(item,index) in list" :key="index">
			<view class="icon f_d f_zj">
				<view class="title f">
					<text class="text">{{item.used_amount}}</text>
					<text>元</text>
				</view>
				<view class="tip">
					满{{item.with_amount}}可用
				</view>
			</view>
			<view class="q_msg f_d f_z_b">
				<view class="title text_ellipsis2">
					{{item.title}}
				</view>
				<view class="nums">
					<view class="num">
						{{item.yl_quota}}/{{item.quota}}
					</view>
					<u-line-progress :percentage="(item.yl_quota/item.quota)*100" activeColor="#EB7144"
						inactiveColor="#F7E2D2" height="12rpx"></u-line-progress>
				</view>
			</view>
			<view class="f_j">
				<view class="btn" @click="lq(item.id)">
					立即领取
				</view>
			</view>
		</view>
		<u-empty v-if="list.length==0" text='没有优惠券可领~' icon="/static/public/kong.png">
		</u-empty>
	</view>
</template>

<script>
	import { coupon_list } from '@/api/page.js'
	import { draw } from '@/api/user.js'
	export default {
		data() {
			return {
				query_data: {
					page: 1,
					status: 1
				},
				list: [],
				more: 'loadmore'
			}
		},
		onLoad() {
			this.get_list()
		},
		onReachBottom() {
			if (this.more == 'loadmore') {
				this.get_list()
			}
		},
		methods: {
			get_list() {
				coupon_list(this.query_data).then(res => {
					if (res.code == 1) {
						if (res.data.data.length > 0) {
							this.list = [...this.list, ...res.data.data]
							this.query_data.page += 1
							this.more = 'loadmore'
						} else {
							this.more = 'nomore'
						}
					}
				})
			},
			lq(id) {
				draw({ id }).then(res => {
					if (res.code == 1) {
						this.list = []
						this.query_data.page = 1
						this.get_list()
					}
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #FFFFFF;
		padding: 30rpx;

		.item {
			margin-bottom: 50rpx;

			.icon {
				width: 220rpx;
				height: 130rpx;
				background: #F5F1F2;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				background-image: url(../../static/me/yhq_bg.png);
				background-size: 100%;
				background-repeat: no-repeat;
				color: #FFFFFF;
				font-weight: 400;
				font-size: 24rpx;

				.title {
					margin-bottom: 20rpx;
					align-items: flex-end;

					.text {
						margin-right: 8rpx;
						font-weight: 400;
						font-size: 30rpx;
					}
				}
			}

			.q_msg {
				flex: 1;
				margin-left: 20rpx;

				.title {
					font-weight: 400;
					font-size: 29rpx;
					color: #3D3D3D;
				}

				.nums {
					.num {
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
						margin-bottom: 6rpx;
					}
				}
			}

			.btn {
				margin-left: 15rpx;
				padding: 12rpx 30rpx;
				font-weight: 400;
				font-size: 29rpx;
				color: #FFFFFF;
				background: linear-gradient(267deg, #FB4034 0%, #FE6A3F 100%);
				border-radius: 829rpx 829rpx 829rpx 829rpx;
			}
		}
	}
</style>